<template>
  <view class="money">
    <image
      class="bg"
      :src=" defStatus === EnumStatus.STATUS ?  '/static/bmi/status.png' : '/static/bmi/result.png'"
    ></image>
    <BmiInput  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"/>
    <BmiResult v-else :content="content" v-model:defStatus="defStatus"  />
  </view>

  <Recommend :top='98'/>
  <ToDY />
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
import { EnumBG } from "@/utils/content";
import BmiInput from "./components/BmiInput.vue";
import BmiResult from "./components/BmiResult.vue";
import ToDY from "@/components/ToDY/ToDY.vue";
import Recommend from "@/components/Recommend/Recommend.vue";

const defStatus = ref(EnumStatus.STATUS)
const content = ref()
</script>

<style>
page {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
.money{
    width: 100%;
    height: 100%;
    .bg{
        width: 100%;
        height: 100%;
    }
    .logo{
      position: absolute;
      z-index: 90;
      width: 100rpx;
      height: 80rpx;
      top: 26.5%;
      left: 3%;
    }
    .logo-big{
      width: 110rpx;
      top: 26%;
      left: 2.5%;
      transition: all 1s;
    }
    .logo-small{
      width: 100rpx;
      top: 26.5%;
      left: 3%;
      transition: all 1s;
    }
}
</style>